<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :before-close="handleClose"
      :visible.sync="dialogVisible"
      :append-to-body="appendToBody"
      :fullscreen="fullscreen"
      :width="DialogWidth"
      :modal="modalDes"
      :close-on-press-escape="closeonclickmodal"
      v-if="dialogVisible"
    >
      <div
        slot="title"
        style="display: flex; justify-content: space-between;align-items: center;"
        :style="headerStyle"
      >
        <div v-if="titleCenter"></div>
        <div>{{ title }}</div>
        <div
          v-if="fullscreenDis"
          style="margin-right: 30px; cursor: pointer;"
          @click="fullscreen = !fullscreen"
        >
          <img
            style="width: 18px; height: 18px;"
            :src="
              !fullscreen
                ? require('../../assets/icon/add.png')
                : require('../../assets/icon/fix.png')
            "
            alt=""
          />
        </div>
      </div>

      <slot></slot>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    titleCenter: {
      type: Boolean,
      default: false
    },
    DialogWidth: {
      type: String,
      default: "60%"
    },
    modalDes: {
      type: Boolean,
      default: true
    },
    fullscreenDis: {
      type: Boolean,
      default: true
    },
    closeonclickmodal: {
      type: Boolean,
      default: true
    },
    headerStyle: {
      type: String,
      default: ""
    },
    appendToBody: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fullscreen: false,
      dialogVisible: false
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.fullscreen = false;
      this.$emit("handleClose");
    },
    openlog() {
      this.dialogVisible = true;
      this.$emit("openlog");
    }
  }
};
</script>

<style scoped lang="scss">
/deep/ .el-dialog__body {
  padding: 0 20px;
}
</style>
